<template>
  <view class="chart-container">
    <qiun-data-charts 
      type="pie"
      :chartData="chartData"
      :opts="chartOptions"
      :canvas2d="true"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        series: [
          { name: "电商", data: 150 },
          { name: "教育", data: 90 },
          { name: "金融", data: 120 },
          { name: "医疗", data: 60 },
          { name: "其他", data: 80 }
        ]
      },
      chartOptions: {
        color: ["#1890FF", "#13C2C2", "#2FC25B", "#FACC14", "#F04864"],
        padding: [15, 15, 0, 15],
        legend: {
          show: true,
          position: "bottom",
          float: "center",
          padding: 5
        },
        extra: {
          pie: {
            activeOpacity: 0.8,
            activeRadius: 15,
            labelWidth: 10,
            border: true,
            borderWidth: 2,
            borderColor: "#FFFFFF",
            showTitle: true,
            showLabel: true,
            showPercent: true,
            title: {
              name: "行业分布",
              fontSize: 15,
              color: "#666666"
            }
          }
        }
      }
    };
  }
};
</script>

<style>
.chart-container {
  width: 100%;
  height: 400px;
  padding: 10px;
  box-sizing: border-box;
}
</style>